<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
                template="../templates/templateIntro.xhtml">

    <ui:define name="head">
        <script src='https://www.google.com/recaptcha/api.js'></script>
        <style>
            .mytable {width: 100%; min-height: 100%; position: fixed; background-size: cover;}
        </style>
    </ui:define>
    <ui:define name="content-login">
        
        <table>
            <tr style="height: 50px;" >
                <td>
                    <h:panelGrid border="0" style="width: 100%;" bgcolor="white" columns="2" cellpadding="0" cellspacing="0" >
                        <p:graphicImage value="../images/logoJaio360.jpg" width="140" height="50" />
                    </h:panelGrid>
                </td>
            </tr>
        </table>
        <table class="mytable" background="../images/fondos/fondo4.jpg" ><tr><td></td></tr></table>
        
        <p:dialog header="Jaio360" visible="true" position="80,150" width="350" fitViewport="true" height="430" modal="false" closable="false" showEffect="drop" resizable="false" >
            <h:form>
                <p:panel id="panel1">
                <p:focus context="panel1" />
                <h:panelGrid columns="1">
                    <h4>¡Hola #{menuPrincipal.usuarioInfo.strDescripcion}!</h4>
                    <p>El equipo de Jaio te da la bienvenida y te agradecemos por usar nuestra herramienta 360.</p>
                    <c:if test="#{(menuPrincipal.usuarioInfo.boEsAdministrador == true ||
                                 menuPrincipal.usuarioInfo.boEsUsuarioMaestro == true) and
                                 listasPrincipalView.cantidadLstProyectos>=0}">
                        <p>Para comenzar, recuerda que debes tener claro cual es nuestro proceso y siempre tener a la mano el manual del usuario en caso tengas dudas o consultas.</p>
                        <h:form>
                            <h:panelGrid columns="1">
                                <p:commandButton value="Comenzar el día" actionListener="#{usuarioSesion.ingresaSistema}" icon="ui-icon-arrow-1-e" />
                                <p:commandButton value="Flujo del proceso" disabled="true" icon="ui-icon-arrowthickstop-1-s" />
                                <p:commandButton value="Descargar manual de Jaio360" disabled="true" icon="ui-icon-arrowthickstop-1-s" />
                            </h:panelGrid>
                        </h:form>
                    </c:if>
                </h:panelGrid>

                <c:if test="#{menuPrincipal.usuarioInfo.boEsAdministrador != true and
                              listasPrincipalView.cantidadLstEvaluaciones>0}">
                    <h:panelGrid columns="1" border="0" style="width: 100%;" >
                        <c:if test="#{listasPrincipalView.cantidadLstEvaluaciones==1}">
                            <p>Actualmente tienes #{listasPrincipalView.lstEvaluaciones.size()} evaluacion no resuelta.</p>
                        </c:if>
                        <c:if test="#{listasPrincipalView.cantidadLstEvaluaciones>1}">
                            <p>Actualmente tienes #{listasPrincipalView.lstEvaluaciones.size()} evaluaciones no resueltas.</p>
                        </c:if>

                        <p:dataGrid var="eva" value="#{listasPrincipalView.lstEvaluaciones}" columns="1" layout="grid" style="width: 100%;" 
                                    rows="1" paginator="true"  paginatorPosition="top" 
                                    paginatorTemplate="{CurrentPageReport} {PreviousPageLink} {NextPageLink} "  >

                            <p:commandLink actionListener="#{listasPrincipalView.irEvaluacion(eva)}" >
                            <h:panelGrid style="text-align:center; width: 100%;">
                                <f:facet name="header">
                                    #{eva.strDescCuestionario}
                                </f:facet>
                                <h:outputText value="#{eva.strDescEvaluado} (Click aqui)" /> 
                            </h:panelGrid>
                            </p:commandLink>
                        </p:dataGrid>
                    </h:panelGrid>
                </c:if>

                <c:if test="#{menuPrincipal.usuarioInfo.boEsAdministrador != true and
                              listasPrincipalView.cantidadLstRedes>0}">
                    <h:panelGrid columns="1" border="0" style="width: 100%;" >
                        <c:if test="#{listasPrincipalView.cantidadLstRedes==1}">
                            <p>Actualmente tienes #{listasPrincipalView.lstRedes.size()} red pendiente por definir.</p>
                        </c:if>
                        <c:if test="#{listasPrincipalView.cantidadLstRedes>1}">
                            <p>Actualmente tienes #{listasPrincipalView.lstRedes.size()} redes pendientes por definir.</p>
                        </c:if>
                        <p:dataGrid var="eva" value="#{listasPrincipalView.lstRedes}" columns="1" layout="grid" style="width: 100%;" 
                                    rows="1" paginator="true"  paginatorPosition="top" 
                                    paginatorTemplate="{CurrentPageReport} {PreviousPageLink} {NextPageLink} "  >

                            <p:commandLink actionListener="#{listasPrincipalView.irRed(eva)}" >
                            <h:panelGrid style="text-align:center; width: 100%;">
                                <f:facet name="header">
                                    #{eva.strDescNombre} (Click aqui)
                                </f:facet>
                                <h:outputText value="#{eva.strMotivo}" /> 
                            </h:panelGrid>
                            </p:commandLink>
                        </p:dataGrid>
                    </h:panelGrid>
                </c:if>
                
                <c:if test="#{(menuPrincipal.usuarioInfo.boEsAdministrador == false and
                             menuPrincipal.usuarioInfo.boEsUsuarioMaestro == false) and
                             listasPrincipalView.cantidadLstEvaluaciones==0 and 
                             listasPrincipalView.cantidadLstRedes==0 }">
                    <h:panelGrid columns="1" border="0" style="width: 100%;" >
                        <p>¡Muchas gracias! Usted no tiene trabajos pendientes!</p>
                        <p:commandButton id="btcerrarSesion" widgetVar="btcerrarSesion" actionListener="#{usuarioSesion.cerrarSesion}" value="Salir del sistema" >
                            <p:confirm header="#{msg['cabecera.logout.confirmacion.title']}" message="#{msg['cabecera.logout.confirmacion.mensaje']}" icon="ui-icon-alert" /> 
                        </p:commandButton>
                        <p:confirmDialog global="true" >
                            <p:commandButton type="button" value="#{msg['cabecera.logout.confirmacion.si']}" styleClass="ui-confirmdialog-yes" />
                            <p:commandButton type="button" value="#{msg['cabecera.logout.confirmacion.no']}" styleClass="ui-confirmdialog-no"  />
                        </p:confirmDialog>
                    </h:panelGrid>
                </c:if>
                
                <h:panelGrid columns="1" border="0" style="width: 100%;" >
                    <p>Si tienes problemas o nuevas ideas no dudes en comunicarnos a <a href="mailto:soporte@jaio360.com?Subject=Help" target="_top">soporte@jaio360.com</a></p>
                </h:panelGrid>
            </p:panel>
            </h:form>
        </p:dialog>
        
        <p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />
 
        <p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
            <p:graphicImage value="/images/ajax-loader.gif" />
        </p:dialog>
                
    </ui:define>
</ui:composition>